<template>
  <HeaderFixed />
  <Header></Header>
  <Swiper></Swiper>
  <!-- <div ref="target">
    <BookList v-if="targetIsVisible"></BookList>
  </div> -->
  <BookList></BookList>
  <Footer></Footer>
  <el-backtop :right="100" :bottom="100" />
</template>

<script setup>
// components
import Header from '@/components/common/Header.vue'
import Footer from '@/components/common/Footer.vue'
import Swiper from '@/components/home/Swiper.vue'
import BookList from '@/components/home/BookList.vue'
import HeaderFixed from '@/components/common/HeaderFixed.vue'
import { useStore } from "vuex"

// 异步方式引入组件
// import { useIntersectionObserver } from '@vueuse/core'
// const BookList = defineAsyncComponent(() =>
//   import('@/components/home/BookList.vue')
// )

// const target = ref(null);
// const targetIsVisible = ref(false);

// const { stop } = useIntersectionObserver(
//   target,
//   ([{ isIntersecting }]) => {
//   	if( isIntersecting ) {
//   		targetIsVisible.value = isIntersecting
//   	}
//   },
// )



</script>

<style lang='less' scoped>

</style>